<template>
    <div class="root" v-if="isOpen">
        <div class="mark">
            <div class="select">
                <div class="top">
                    <div class="title">选择头像</div>
                    <img src="@/assets/img/setting/close.png" @click="closeDialog()">
                </div>
                <div class="head" v-for="(item,index) in imgs" >
                    <img :class="mindex==index?'selected':''"  :src="item" @click="synHead(index)">
                </div>
                <div class="button">
                    <div class="cancel"  @click="closeDialog()" >取消</div>
                    <div class="ok" @click="selectedHead()">保存</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'selectIcon',
    data: function() {
      return {
        isOpen:false,
        imgs: [require('@/assets/img/setting/h1.png'),require('@/assets/img/setting/h2.png'), require('@/assets/img/setting/h3.png'),
          require('@/assets/img/setting/h4.png'), require('@/assets/img/setting/h5.png'), require('@/assets/img/setting/h6.png'),
          require('@/assets/img/setting/h7.png'), require('@/assets/img/setting/h8.png'), require('@/assets/img/setting/h9.png'),
          require('@/assets/img/setting/h10.png')],
        mindex:0
      }
    },methods:{
      closeDialog:function() {
        this.isOpen = false;
      },
      openDialog:function() {
        this.isOpen = true;
      },
      synHead(index){
        this.mindex = index;
      },
      selectedHead(){
        this.isOpen = false;
        this.$emit('select', this.mindex)
      }
    }
  }
</script>

<style scoped>
    .root{
        margin: 0px;
        padding: 0px;
    }
   .root .mark{
       position: fixed;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 100%;
       background:rgba(31,31,31,0.5);
   }
    .root .select{
        display: flex;
        padding: 110px 70px;
        justify-content: start;
        flex-wrap: wrap;
        margin: 110px auto;
        width:779px;
        height:470px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        position: relative;
    }
    .root .select .top .title{
        position: absolute;
        left: 45px;
        top: 40px;
        font-size:16px;
        font-weight:400;
        color:rgba(31,46,77,1);
    }
    .root .select .top img{
        width: 14px;
        height: 14px;
        position: absolute;
        right: 40px;
        top: 40px;
    }
    .root .head{
        width: 101px;
        height: 101px;
        /*border: 2px dashed gray;*/
        margin: 12px 12px 0px 12px;
    }
    .root .head img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .root .head img.selected{
        width: 92px;
        height: 92px;
        border: 4px solid #69A1FF;
    }
    .root .button{
        margin: 60px auto;
        display: flex;
        flex-direction: row;
        justify-content: start;
    }
    .root .button .cancel{
        width: 100px;
        height: 40px;
        /*border: 2px dashed gray;*/
        text-align: center;
        line-height: 40px;
        margin-right: 20px;
    }
    .root .button .ok{
        width: 100px;
        height: 40px;
        /*border: 2px dashed gray;*/
        text-align: center;
        line-height: 40px;
        background: #4D8DFA;
    }

</style>